<script setup lang="ts">
import { DeviceInfoApi } from '@/api/eiot/deviceinfo'
import { draftApi } from '@/api/draft'
import ContentWrap from '@/components/ContentWrap/src/ContentWrap.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { dateFormatter } from '@/utils/formatTime'
import videoPlayDialog from './videoPlayDialog.vue'

defineExpose({
  initList,
  getSelected
})

const emit = defineEmits(['updateLinkDeviceLength', 'refresh'])

const tableData = ref([])
const multipleSelection = ref([])

const pagination = ref({
  total: 0,
  pageSize: 20,
  pageSizes: [10, 20, 30, 40],
  pageNo: 1
})
const videoDialogRef = ref()
const publishLoading = ref(false)

onMounted(() => {
  getList()
})

function initList(_propertyProjectId) {
  pagination.value.pageNo = 1
  getList(_propertyProjectId)
}

function getList(_propertyProjectId) {
  draftApi
    .getList({
      pageNo: pagination.value.pageNo,
      pageSize: pagination.value.pageSize
    })
    .then((res) => {
      tableData.value = res.list.map(v => {
        v.publishLoading = false
        return v
      })
      pagination.value.total = res.total
      emit('updateLinkDeviceLength', res.list.length)
    })
}

//删除操作
const deleteDevice = (row) => {
  ElMessageBox.confirm('确定删除该草稿', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    PropertyApi.deletePropertyDevice({ id: row.id }).then((res) => {
      ElMessage({
        message: '删除草稿成功',
        type: 'success'
      })
      // getList() //获取设备信息列表数据
      emit('refresh')
    })
  })
}

function handleEdit(row) {}
function handleSizeChange(val) {
  pagination.value.pageSize = val
  pagination.value.pageNo = 1
  getList()
}

function handleCurrentChange(val) {
  console.log('跳页', val)
  pagination.value.pageNo = val
  getList()
}

function handleSelectionChange(val) {
  multipleSelection.value = val
  console.log('handleSelectionChange', val)
}

function getSelected() {
  return multipleSelection.value
}

function handlePublish(row) {
  row.publishLoading = true
  setTimeout(() => {
    row.publishLoading = false
    ElMessage({
      message: '发布失败',
      type: 'error'
    })

  }, Math.floor(Math.random() * (6000 - 4000 + 1)) + 4000)
}

function handlePlayVideo(row) {
  videoDialogRef.value.init(row.url)
}
</script>

<template>
  <ContentWrap>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="device-table"
      :header-cell-class-name="'custom-header'"
      @selection-change="handleSelectionChange"
    >
      <el-table-column prop="name" label="所属短剧" />
      <!-- <el-table-column prop="socialUserId" label="发布抖音号" /> -->
      <el-table-column prop="title" label="视频标题" />
      <el-table-column prop="videoRemark" label="视频描述" />
      <el-table-column prop="createTime" label="更新时间" :formatter="dateFormatter" />
      <el-table-column prop="operation" label="操作" width="200" style="padding: 0">
        <template #default="{ row }">
          <!-- <el-button link type="primary" size="small" @click="handleEdit(row)"> 更新 </el-button> -->
          <el-button link type="primary" size="small" @click="handlePlayVideo(row)">
            查看视频
          </el-button>
          <el-button link type="primary" size="small" @click="handlePublish(row)" :loading="row.publishLoading"> 发布 </el-button>
          <!-- <el-button link type="danger" size="small" @click="deleteDevice(row)"> 删除 </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-row justify="end" style="margin-top: 10px">
      <el-pagination
        v-model:current-page="pagination.pageNo"
        v-model:page-size="pagination.pageSize"
        :page-sizes="pagination.pageSizes"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
    <videoPlayDialog ref="videoDialogRef"  />
  </ContentWrap>
</template>

<style lang="scss" scoped>
.device-table {
  --el-color-primary: #368ec7;

  :deep(.custom-header) {
    background-color: #f2f4f5;
    font-family: 'SourceHanSansSC';
    font-weight: 400;
    font-size: 14px;
    color: #4d5663;
    line-height: 25px;
    text-align: left;
    font-style: normal;
  }
}
</style>
